<template>
  <div class="main">
    <p class="main_text">提现记录</p>
    <!-- ############################################## 查询 ############################################## -->
    <!-- <div class="top mb20 p20">
      <el-form :model="serachData" class="df">
        <el-form-item label="账户类型：" style="width: 20%;">
          <el-select v-model="serachData.name" placeholder="账户类型" class="mr20" clearable>
            <el-option label="公司账户" value="true" />
            <el-option label="私人账户" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="到账类型：" style="width: 20%;">
          <el-select v-model="serachData.name" placeholder="到账类型" class="mr20" clearable>
            <el-option label="实时" value="true" />
            <el-option label="延迟" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">查询</el-button>
          <el-button type="primary" plain @click="resc">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <el-table :data="tableData" border v-adaptive>
        <el-table-column label="编号" prop="id" />
        <el-table-column label="提现时间" prop="type" />
        <el-table-column label="账户类型" prop="num" />
        <el-table-column label="提现卡信息" prop="leftNum" />
        <el-table-column label="提现金额" prop="fee" />
        <el-table-column label="服务费" prop="name" />
        <el-table-column label="状态" prop="createdAt" />
      </el-table>
      <!-- #################################### 分页 #################################### -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
    </div>
  </div>
</template>


<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { Wallet, Edit } from '@element-plus/icons-vue'
import { formatTime, formatTimeAll } from '@/filters/index'
import { RequestRecognizeLogList, RequestRecognizeLeft, RequestSettleId } from '@/api/path/index.js'
import { ref } from 'vue';


const serachData = ref({
  name: null,
  value: null
})
// 查询
const searchBtn = () => { }
// 重置
const resc = () => { }
/* ************************ 分页获取数据 ************************ */
/* ************* 获取列表数据 ************* */
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0)
const tableData = ref<any>([]);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>


<style scoped lang="scss">
.main {
  width: 100%;

  .top {
    width: 100%;
    background-color: #fff;
  }


  .content {
    width: 100%;
    background-color: #fff;
  }
}


.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}


.downLoad {
  line-height: 1rem;
  margin-left: .625rem;
  color: #116cf8;
}


.el-select {
  width: 100%;
}


.el-input-number {
  width: 100%;
}


.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: .5rem;
}


/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;


    .el-icon svg {
      color: #fff;
    }
  }


  .el-dialog__title {
    color: #fff;
  }


  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }
}


::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }


  .el-drawer__header {
    margin-bottom: 0;
  }
}


.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: .0625rem solid #dcdfe6;
    border-left: none;
  }
}


.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}


/* 上传框 */
.upload {
  width: 7.625rem;
  height: 7.625rem;
  border-radius: .375rem;
  background-color: #fafafa;
  overflow: hidden;
  border: .0625rem dashed #cdd0d6;
  position: relative;
}


.upload:hover {
  border: .0625rem dashed #116cf8;
  transition: 500ms;


  .add {
    color: #116cf8;
    transition: 500ms;
  }
}


.add {
  font-size: 2.25rem;
  color: #cccccc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}


::v-deep .el-upload-list__item,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload {
  width: 7.5rem;
  height: 7.5rem;
}


::v-deep .el-upload {
  opacity: 0;
}
</style>